<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 输入框 -->

        <div>
          <el-row class="row-bg" type="flex" justify="space-between">
            <el-col :span="21">
              <div class="grid-content bg-purple">
                <span class="keyword">学科名称</span>
                <el-input
                  v-model.trim="form.subjectName"
                  placeholder="根据编号搜索"
                  class="inputFont"
                ></el-input>
                <el-button @click="closeFn">清除</el-button>
                <el-button type="primary" @click="searchFn">搜索</el-button>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button type="success" @click="addFn">
                <i class="el-icon-edit"></i>新增学科</el-button
              >
            </el-col>
          </el-row>
        </div>
        <!-- 上方灰色的一条框 -->

        <div class="alldata">
          <!-- <svg></svg> -->
          <div>
            <!--  -->
            <p class="allCounts">
              <i class="el-icon-info"></i> 数据一共 {{ counts }} 条
            </p>
          </div>
        </div>
        <el-table :data="listData" style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="130">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="160">
          </el-table-column>
          <el-table-column label="创建日期" width="230">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" width="120">
            <template slot-scope="scope">
              {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="220px">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="
                  $router.push(
                    `directorys?id=${scope.row.id}&name=${scope.row.subjectName}`
                  )
                "
                >学科分类</el-link
              >
              <el-link
                type="primary"
                @click="
                  $router.push(
                    `tags?id=${scope.row.id}&name=${scope.row.subjectName}`
                  )
                "
                >学科标签</el-link
              >
              <el-link type="primary" @click="reviseFn(scope.row.id)"
                >修改</el-link
              >
              <el-link type="primary" @click="delFn(scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="form.pagesize"
          :background="true"
          layout="->, prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>

        <!-- 添加弹出层 -->
        <el-dialog
          :title="isEdit ? '修改学科' : '新增学科'"
          :visible.sync="dialogVisible"
          width="30%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
        <!-- 弹出组件 -->
          <subjects-add
            v-if="dialogVisible"
            :isEdit="isEdit"
            :subject-id="subjectId"
            @closeDialog="closeDialog"
            @close="dialogVisible = false"
          ></subjects-add>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>

import subjectsAdd from '@/module-hmmm/components/subjects-add'
import { list, remove } from '@/api/hmmm/subjects'
export default {
  components: {
    subjectsAdd
  },
  data () {
    return {
      form: {
        page: 1, // 当前页
        pagesize: 10, // 页尺寸
        subjectName: ''
      },
      counts: null, // 总数pages
      listData: [], // 表格数据
      dialogVisible: false, // 控制添加弹出层的出现
      isEdit: false, // 是否是编辑
      subjectId: 0 // 学科 id
    }
  },
  created () {
    // 调用列表数据
    this.list()
  },
  methods: {
    //  删除学科
    async delFn (id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmRes === 'cancel') return
      await remove({ id: id })
      if (this.listData.length === 1) {
        this.form.page--
        if (this.form.page >= 1) {
          this.form.page = 1
        }
      }
      // 删除成功提示
      this.$message.success('删除成功')
      // 调用列表数据
      this.list()
    },

    // 修改学科
    reviseFn (id) {
      this.dialogVisible = true
      this.subjectId = id
      this.isEdit = true
    },

    // 子组件传来的 关闭弹框
    closeDialog () {
      this.dialogVisible = false
      // 调用列表数据
      this.list()
    },

    // 添加学科
    addFn () {
      this.dialogVisible = true
      this.isEdit = false
    },

    // 当前页面条数发生改变
    handleSizeChange (pageSize) {
      this.form.pagesize = pageSize
      // 调用列表数据
      this.list()
    },

    // 当前页发生改变
    handleCurrentChange (page) {
      this.form.page = page
      // 调用列表数据
      this.list()
    },

    // 搜索
    searchFn () {
      // 调用列表数据
      this.list()
    },

    // 清除
    closeFn () {
      this.form.subjectName = ''
      // 调用列表数据
      this.list()
    },

    // 获取列表数据
    async list () {
      const res = await list(this.form)
      console.log(res)
      this.listData = res.data.items
      this.counts = res.data.counts
    }
  }
}
</script>

<style  lang='scss'>
i.el-icon-edit {
  margin-right: 5px;
}
a.el-link.el-link--primary.is-underline {
  margin-right: 5px;
}
.el-pagination__rightwrapper {
  margin-top: 15px;
}
.el-table__row {
  height: 50px;
}
button.el-button.el-button--default.el-button--medium {
  margin-left: 15px;
}
el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.alldata {
  color: #909399;
  // text-align: center;

  height: 36px;
  width: 100%;
  margin-bottom: 15px;
}
.alldata .allCounts {
  line-height: 36px;
  font-size: 12px;
  padding-left: 40px;
  background-color: #f4f4f5;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-left: 20px;
}
.row-bg {
  padding: 10px 0;
  // background-color: #f9fafc;
}
.inputFont.el-input.el-input--medium {
  width: 350px;
  padding-left: 15px;
}
.keyword {
  // margin-bottom: 15px;
  // padding-left: 30px;
  font-size: 14px;
  color: #000;
}
</style>
